.layout {
  :global {
    .ant-layout {
      min-height: 100vh;
    }

    .ant-layout-sider {
      background: linear-gradient(180deg, #001529 0%, #003366 100%) !important;
      position: relative;
      z-index: 10;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
          linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        background-size: 20px 20px;
        pointer-events: none;
      }
    }

    .ant-layout-header {
      background: rgba(255, 255, 255, 0.9) !important;
      backdrop-filter: blur(10px);
      padding: 0 24px;
      height: 56px;
      line-height: 56px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      position: sticky;
      top: 0;
      z-index: 9;
    }

    .ant-menu-dark {
      background: transparent;
    }

    .ant-menu-item, .ant-menu-submenu-title {
      margin: 4px 8px !important;
      border-radius: 6px;

      &:hover {
        background: rgba(255, 255, 255, 0.08) !important;
      }
    }

    .ant-menu-item-selected {
      background: linear-gradient(90deg, #1890ff 0%, #096dd9 100%) !important;
    }

    .ant-layout-content {
      position: relative;
      background: #f0f2f5;
      padding: 24px;
      margin: 0;

      &::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        background: linear-gradient(135deg, #001529 0%, #003366 100%);
        z-index: 0;
      }
    }
  }
}

.headerLeft {
  display: flex;
  align-items: center;
  gap: 12px;

  .logo {
    height: 32px;
  }

  h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
}

.headerRight {
  display: flex;
  align-items: center;
  gap: 24px;

  .notification {
    font-size: 18px;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: #1890ff;
    }
  }

  .userInfo {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 24px;
    transition: all 0.3s;

    &:hover {
      background: rgba(0, 0, 0, 0.04);
    }

    span {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}

.trigger {
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: #1890ff;
  }
} 